/*
 * @Author: yuta
 * @Date: 2021-09-15 18:18:58
 * @LastEditTime: 2021-10-12 10:19:58
 * @LastEditors: Drc
 */
/*
 * @Author: Drc
 * @Date: 2021-05-19 17:20:12
 * @LastEditTime: 2021-09-09 17:57:47
 * @LastEditors: yuta
 */

import React, {memo} from 'react'
import {View, Text, Platform, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native'
import Pop, {PopProps} from './index'
import Theme from '@path/config/theme'
import {px2dp} from '@path/config/system'
import store from '@path/redux'
import Locale from '@path/locale'
import _ from 'lodash'
import {ThemeText} from '../ThemeComponents'
import ErrorTips from '@path/components/ErrorTips'

interface TradePwdPopProps extends PopProps {
  length?: number
  onConfirm: (pwd: string) => any
  title: string
  onPress: () => void
  error: string
  amount: any
}

class TradePwdPop extends Pop<TradePwdPopProps> {
  constructor(props: any) {
    super(props)
  }

  static defaultProps: TradePwdPopProps = {
    length: 6,
    animationIn: 'zoomIn',
    animationOut: 'zoomOut',
  }

  state = {
    pwd: '',
    isLoading: false,
  }

  onClose = () => {
    this.setState({
      pwd: '',
    })
  }

  componentDidMount() {}

  componentDidUpdate() {
    if (this.state.pwd?.length === this.props.length) {
      typeof this.props.onConfirm === 'function' && this.props.onConfirm(this.state.pwd)
      this.setState({pwd: ''})
    }
  }

  _renderInput = () => {
    const list = new Array(this.props.length).fill('')

    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'nowrap',
          marginTop: px2dp(24),
        }}>
        {list.map((item, index) => {
          return (
            <View
              key={index}
              style={{
                flex: 1 / list.length,
                height: px2dp(38),
                marginLeft: index === 0 ? 0 : px2dp(10),
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 8,
                backgroundColor: Theme.currentTheme === 'light' ? '#FCFCFC' : '#443F68',
                borderWidth: 1,
                borderColor: '#E0E0E0',
              }}>
              <ThemeText
                style={{
                  fontSize: 24,
                }}>
                {this.state.pwd[index]}
              </ThemeText>
            </View>
          )
        })}
        <TextInput
          autoFocus={Platform.OS === 'ios'}
          clearButtonMode={'never'}
          value={this.state.pwd}
          style={{
            opacity: 0,
            height: '100%',
            position: 'absolute',
            width: '100%',
          }}
          secureTextEntry
          maxLength={this.props.length}
          onChangeText={(text) => {
            if (isNaN(Number(text))) {
              return
            }
            this.setState({
              pwd: text,
            })
          }}
          keyboardType={'number-pad'}
        />
      </View>
    )
  }

  renderContent = () => {
    return (
      <View
        style={{
          width: px2dp(327),
          backgroundColor: Theme.getThemeColor('bg'),
          borderRadius: 14,
          paddingVertical: px2dp(30),
          paddingHorizontal: px2dp(30),
          alignItems: 'center',
        }}>
        {/* 标题 */}
        <ThemeText
          style={{
            fontSize: 15,
            color: Theme.getThemeColor('text_main'),
          }}>
          {this.props.title}
        </ThemeText>

        {/* 支付金额 */}
        <ThemeText
          style={{
            fontSize: 24,
            fontWeight: 'bold',
            color: Theme.getThemeColor('theme'),
            marginTop: px2dp(20),
          }}>
          {this.props.amount}
        </ThemeText>

        <ThemeText
          style={{
            fontSize: 12,
            color: Theme.getThemeColor('text_minor'),
            marginTop: px2dp(14),
          }}>
          {Locale.getString('home.tradePwd_pop_order_amount')}
        </ThemeText>

        {/* 输入框 */}
        {this._renderInput()}

        {/* 错误提示 */}
        {this.props.error ? <ErrorTips text={this.props.error} /> : null}

        {/* 忘记密码 */}
        <TouchableOpacity
          style={{marginTop: px2dp(20)}}
          activeOpacity={0.8}
          onPress={() => {
            typeof this.props.onPress === 'function' && this.props.onPress()
          }}>
          <ThemeText style={{color: Theme.getThemeColor('text_label')}}>
            {Locale.getString('login.forget_pwd')}
          </ThemeText>
        </TouchableOpacity>
      </View>
    )
  }
}

export default memo(TradePwdPop, (prev, next) => _.isEqual(prev.isVisible, next.isVisible))
